// 2. 导入变量文件，添加命名空间 `v`（对应 variables.scss）
@use "@/styles/variables" as v;
@use 'sass:color'; // 导入 Sass 颜色模块
// 清除浮动
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// 居中对齐（水平和垂直）
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 阴影效果（变量加命名空间 v.）
@mixin shadow($shadow: v.$shadow) {
  box-shadow: $shadow;
}

// 圆角（变量加命名空间 v.）
@mixin rounded($radius: v.$border-radius) {
  border-radius: $radius;
}

// 过渡动画（变量加命名空间 v.）
@mixin transition($property: all, $duration: v.$transition-speed, $easing: v.$transition-easing) {
  transition: $property $duration $easing;
}

// 响应式断点
@mixin respond-to($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 767px) {
      @content;
    }
  }
  @else if $breakpoint == tablet {
    @media (min-width: 768px) and (max-width: 1023px) {
      @content;
    }
  }
  @else if $breakpoint == desktop {
    @media (min-width: 1024px) {
      @content;
    }
  }
}